<template>
  <div class="more-wrapper" :key="this.listType" @scroll="pullDownRefresh">
    <div class="more-movie" v-for="item in this.movieList" :key="item.id">
      <movie :groupMovie="item"></movie>
    </div>
  </div>
</template>

<script>
import {getMovieMoreInfo} from 'api/complex'
import Movie from './Movie'
export default {
  name: 'MovieMore',
  data () {
    return {
      listType: '',
      moreParams: {},
      movieList: Object,
      moreStart: 0,
      wrapperHeight: ''
    }
  },
  components: {
    Movie
  },
  methods: {
    _getMovieMoreInfo () {
      getMovieMoreInfo(this.moreParams).then((res) => {
        if (res.status === 200) {
          this.movieList = res.data.subjects
        }
      })
    },
    pullDownRefresh () {
      let scrollTop = document.documentElement.scrollTop
      let offsetHeight = document.documentElement.offsetHeight
      let scrollHeight = document.documentElement.scrollHeight
      if (scrollTop + offsetHeight === scrollHeight) {
        this.moreStart += 20
        this.moreParams = {type: this.listType, start: this.moreStart}
        getMovieMoreInfo(this.moreParams).then((res) => {
          if (res.status === 200) {
            this.movieList = this.movieList.concat(res.data.subjects)
          }
        })
      }
    }
  },
  created () {
    this.listType = this.$route.query.listType
    this.moreParams = {type: this.listType, start: this.moreStart}
    this._getMovieMoreInfo()
  },
  watch: {
    $route (to, from) {
      if (to.name === 'MovieMore' && this.list !== to.query.listType) {
        this.listType = to.query.listType
        this.moreParams = {type: this.listType, start: this.moreStart}
        this._getMovieMoreInfo()
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.pullDownRefresh)
  },
  beforeRouteLeave (to, from, next) {
    window.removeEventListener('scroll', this.pullDownRefresh)
    this.moreStart = 0
    next()
  },
  deactivated () {
    this.$destroy('MovieMore')
  }
}
</script>

<style lang="stylus" scoped>
  .more-wrapper
    display: flex
    flex-wrap: wrap
    .more-movie
      width: 2.3rem
      padding: .15rem .2rem .2rem .15rem
</style>
